<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Simple - 简！ </title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件,Simple">
    <meta name="description" content="Simple 是一个基于layui框架，一个轻量，简约，包含丰富模块化前端框架，帮您快速构建网站。">
    <link rel="stylesheet" href="./css/s.css">
    <link rel="stylesheet" href="./css/extend.css">
    <script src="./layui.js"></script>
</head>
<body>

<div class="s-header">
    <div class="layui-container flex space-between">
        <a class="s-header-a" href="./core.html">
            <img src="./img/logo/logo-grey.png" alt="" class="s-header-logo">
        </a>
        <ul class="s-header-menu">
            <li><a href="./">首页</a></li>
            <li><a href="./core.html" class="active">基础框架</a></li>
            <li><a href="http://www.we63.com/index.php">组件库</a></li>
            <li><a href="http://www.we63.com/page.php">页面库</a></li>
        </ul>
    </div>
</div>

<div class="s-subheader" style="">
    <div class="layui-container flex">
        <ul class="flex">
            <li><a href="color.html">色彩</a></li>
            <li><a href="typo.html">排版</a></li>
            <li><a href="button.html">按钮</a></li>
            <li><a href="badge.html">徽标</a></li>
            <li><a href="nav.html">导航</a></li>
            <li><a href="breadcrumb.html">面包屑</a></li>
            <li><a href="table.html">表格</a></li>
            <li><a href="form.html">表单</a></li>
            <li><a href="panel.html">面板</a></li>
            <li><a href="progress.html">进度条</a></li>
            <li><a href="icon.html">图标</a></li>
            <li><a href="blank.html">前台空页面</a></li>
            <li><a href="admin.html">后台空页面</a></li>
            <li><a href="help.html">辅助类</a></li>
        </ul>
    </div>
</div>


<div class="layui-container">

<div class="layui-row">

    <div class="layui-col-md12">

        <div class="heading-block">
            <h1>排版·字体</h1>
            <p>字体系统的构建，是『动态秩序之美』的第一步</p>
        </div>

                <div class="typo">

                    <p>这里是演示的正文...父容器上放个.typo 样式类就这么简单</p>
                        <h4>返璞归真</h4>
                        <p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui
                            偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui
                            偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
                        <h4>双面体验</h4>

                        <p>拥有双面的不仅是人生，还有
                            layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。拥有双面的不仅是人生，还有
                            layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。</p>

                        <h4>星辰大海</h4>

                        <p>如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是 layui
                            不灭的执念。如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是 layui
                            不灭的执念。</p>

                </div>




        <div style="margin-bottom: 70px"></div>

        <table class="layui-table typo">

            <thead>
            <tr>
                <th style="width:25%">元素</th>
                <th>标签</th>
                <th>字体大小</th>
                <th>说明</th>
            </tr>
            </thead>


            <tbody>

            <tr>
                <td><h1>页面标题</h1></td>
                <td><code>&lt;h1&gt;</code></td>
                <td>24px 粗</td>
                <td>在一个页面只有一个页面标题。</td>
            </tr>
            <tr>
                <td><h2>标题</h2></td>
                <td><code>&lt;h2&gt;</code></td>
                <td>22px 粗</td>
                <td>作为页面第二级标题，可能在一个页面中使用到多个二级标题。</td>
            </tr>
            <tr>
                <td><h3>三级标题</h3></td>
                <td><code>&lt;h3&gt;</code></td>
                <td>18px 粗</td>
                <td>页面第三级标题，嵌套在二级标题下使用。</td>
            </tr>
            <tr>
                <td><h4>四级标题</h4></td>
                <td><code>&lt;h4&gt;</code></td>
                <td>16px 粗</td>
                <td>页面第四级标题，嵌套在三级标题下使用。</td>
            </tr>
            <tr>
                <td><h5>五级标题</h5></td>
                <td><code>&lt;h5&gt;</code></td>
                <td>14px  </td>
                <td>页面第五级标题，嵌套在四级标题下使用。</td>
            </tr>
            <tr>
                <td><h6>六级标题</h6></td>
                <td><code>&lt;h6&gt;</code></td>
                <td>12px  </td>
                <td>页面第六级标题，嵌套在五级标题下使用。</td>
            </tr>
            <tr>
                <td><p>这是一个段落</p></td>
                <td><code>&lt;p&gt;</code><p></p></td>
                <td>14px</td>
                <td>正文中大部分由段落组成。</td>
            </tr>

            <tr>
                <td><strong>粗体文本</strong></td>
                <td><code>&lt;strong&gt;</code></td>
                <td>14px</td>
                <td>通常粗体文本用来强调内容。</td>
            </tr>

            <tr>
                <td><small>小的文本</small></td>
                <td><code>&lt;small&gt;</code></td>
                <td>12px</td>
                <td>small文本字体只有正常字体大小的80%。</td>
            </tr>
            <tr>
                <td><a href="#">超链接</a></td>
                <td><code>&lt;a&gt;</code></td>
                <td>14px</td>
                <td>超链接具有不同的颜色以区别其他文本。</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>这是一个有序列表</li>
                        <li>含三个列表项</li>
                        <li>作为示例</li>
                    </ol>
                </td>
                <td><code>&lt;ol&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ol&gt;</code></td>
                <td>14px</td>
                <td>当组织一些并列项目且关注项目之间顺序时可以使用有序列表。</td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>这是一个无序列表</li>
                        <li>含三个列表项</li>
                        <li>作为示例</li>
                    </ul>
                </td>
                <td><code>&lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt;</code></td>
                <td>14px</td>
                <td>当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。</td>
            </tr>


            </tbody>
        </table>











    </div>

</div>

</div>
<div class="layui-col-md12">
    <div class="s-footer">
        <ul>
            <li><strong>Simple </strong></li>
            <li>Version: v1.0</li>
            <li>Last Update:2018-8-3</li>
            <li>
                <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260258189'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D1260258189%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
            </li>
        </ul>
    </div>
</div>

<script>


    layui.use(['element','form','jquery','upload','laydate'], function(){

        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;

        var laydate = layui.laydate;



        // 子菜单静态高亮
        $('.s-subheader a').each(function(){

            filename=location.href.substr(location.href.lastIndexOf('/')+1);

            if ($(this).attr("href") == filename ){
                $(this).addClass("active");
            }
        });

        //执行实例
        var uploadInst = upload.render({
            elem: '#btnlogo' //绑定元素
            ,url: '/upload/' //上传接口
            ,done: function(res){
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>
</body>
</html>